<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchDialog"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getList"
        uniqueId="mesProdOrderTable"
      >
      </ele-page>
    </div>
    <ele-form-drawer class="dialog-pack" :isLoading="isLoading" v-model="formDataDialog" v-bind="formDescDialog" :request-fn="handleSubmit" :visible.sync="visible" :title="title" size="65%">
      <template v-slot:descriptions="data">
        <el-descriptions title="" size="medium " class="descriptions">
          <!-- <el-descriptions-item :label="$i18n.t('suitAnalyse.workOrderCode')">{{ formDataDialog.orderCode || '-' }}</el-descriptions-item> -->
          <el-descriptions-item :label="$i18n.t('suitAnalyse.orderNumber')">{{ formDataDialog.planCode || '-' }}</el-descriptions-item>
          <el-descriptions-item :label="$i18n.t('suitAnalyse.planBeginDate')">{{ formDataDialog.planBeginDate || '-' }}</el-descriptions-item>
          <el-descriptions-item :label="$i18n.t('suitAnalyse.planEndDate')">
            {{ formDataDialog.planEndDate || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$i18n.t('suitAnalyse.workshop')">{{ formDataDialog.workshopName || '-' }} </el-descriptions-item>
          <el-descriptions-item :label="$i18n.t('suitAnalyse.productionLine')">{{ formDataDialog.lineName || '-' }}</el-descriptions-item>
          <el-descriptions-item :label="$i18n.t('suitAnalyse.prodCode')">{{ formDataDialog.prodCode || '-' }}</el-descriptions-item>
          <el-descriptions-item :label="$i18n.t('suitAnalyse.prodName')">{{ formDataDialog.prodName || '-' }}</el-descriptions-item>
          <el-descriptions-item :label="$i18n.t('suitAnalyse.suitRatio')">
            <el-progress style="width: 30%;" :percentage="Number(formDataDialog.suitRatio || 0)"></el-progress>
          </el-descriptions-item>
        </el-descriptions>
      </template>

      <template v-slot:table="data">
        <div class="tables">
          <br />
          <ele-form-search style="height: 60px;" :formConfig="formConfig" :initForm="initForm" @handleSearch="handleSearch" @handleReset="handleReset" ref="eleFormSearch"></ele-form-search>

          <el-table :data="tableData" style="width: 100%;" height="300">
            <el-table-column type="index" :label="$i18n.t('suitAnalyse.order')" align="center" width="60"></el-table-column>
            <el-table-column align="center" prop="materialCode" :label="$i18n.t('suitAnalyse.materialCode')" width="160" show-overflow-tooltip> </el-table-column>
            <el-table-column align="center" prop="materialName" :label="$i18n.t('suitAnalyse.materialName')" show-overflow-tooltip width="160"> </el-table-column>
            <el-table-column align="center" prop="seriesCode" :label="$i18n.t('suitAnalyse.seriesCode')" width="160"> </el-table-column>
            <el-table-column align="center" prop="seriesName" :label="$i18n.t('suitAnalyse.seriesName')" width="160" show-overflow-tooltip> </el-table-column>
            <el-table-column align="center" prop="unit" show-overflow-tooltip :label="$i18n.t('suitAnalyse.companyName')"> </el-table-column>
            <el-table-column align="center" prop="needQty" show-overflow-tooltip :label="$i18n.t('suitAnalyse.quantity')"> </el-table-column>
            <el-table-column align="center" prop="launchQty" show-overflow-tooltip :label="$i18n.t('suitAnalyse.launchQty')" width="160"> </el-table-column>
            <el-table-column align="center" prop="pickQty" show-overflow-tooltip :label="$i18n.t('suitAnalyse.numberInTheMaterial')" width="160"> </el-table-column>
            <el-table-column align="center" prop="receiveQty" show-overflow-tooltip :label="$i18n.t('suitAnalyse.list')"> </el-table-column>
            <el-table-column align="center" prop="unReceiveQty" show-overflow-tooltip :label="$i18n.t('suitAnalyse.unconcernedQuantity')" fixed="right"> </el-table-column>
          </el-table>
        </div>
      </template>
    </ele-form-drawer>
  </div>
</template>

<script>
import { operateList, searchConfig, rowConfig, sendThis } from './config'
import eleFormSearch from '@/components/ele-form-search/index'
import { getList, getSuitDetailById } from '@/api/report/suitAnalyse.js'
export default {
  name: 'suitAnalyse',
  mixins: [searchConfig],
  components: { eleFormSearch },
  data() {
    const self = this
    return {
      title: null,
      initForm: {},
      tableData: [],
      formConfig: {
        inline: true,
        formDesc: {
          prodName: {
            type: 'input',
            label: $i18n.t('suitAnalyse.prodName2'),
            layout: 8
          },
          isDisplayed: {
            type: 'checkbox',
            label: '',
            layout: 8,
            options: [$i18n.t('suitAnalyse.displayShortageOnly')]
          }
        }
      },
      visible: false,
      visible_generate: false, //下发
      isLoading: false,
      loading: false,
      operateList,
      getList,
      formDataDialog: {},
      formDescDialog: {
        span: 24,
        disabled: true,
        isShowSubmitBtn: true,
        formDesc: {
          descriptions: {
            type: 'input',
            label: '',
            layout: 24
          },
          table: {
            type: 'input',
            label: '',
            layout: 24
          }
        }
      },
      // 列表页字段的绑定配置
      column: [
        {
          type: 'selection',
          fixed: 'left'
        },
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        // {
        //   prop: "saleCode",
        //   label: "销售订单编码",
        //   minWidth: 150,
        //   showOverflowTooltip: true,
        // },
        {
          prop: 'planBeginDate',
          label: $i18n.t('suitAnalyse.planBeginDate'),
          minWidth: 180,
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'planEndDate',
          label: $i18n.t('suitAnalyse.planEndDate'),
          minWidth: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'planCode',
          label: $i18n.t('suitAnalyse.planCode'),
          minWidth: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'workshopName',
          label: $i18n.t('common.workshopName'),
          minWidth: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'lineName',
          label: $i18n.t('common.line'),
          minWidth: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'prodCode',
          label: $i18n.t('suitAnalyse.prodCode'),
          minWidth: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'prodName',
          label: $i18n.t('suitAnalyse.prodName'),
          minWidth: 200,
          showOverflowTooltip: true
        },
        {
          prop: 'quantity',
          label: $i18n.t('suitAnalyse.quantity'),
          minWidth: 110,
          showOverflowTooltip: true
        },
        {
          prop: 'unit',
          label: $i18n.t('suitAnalyse.unit'),
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'orderStatus',
          label: $i18n.t('suitAnalyse.orderStatus'),
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'suitRatio',
          label: $i18n.t('suitAnalyse.suitRatio'),
          width: 150,
          render: (h, { row }) => {
            return <el-progress style="width: 100%;" percentage={Number(row.suitRatio || 0)}></el-progress>
          }
        },
        {
          prop: 'pickRatio',
          label: $i18n.t('suitAnalyse.pickRatio'),
          minWidth: 200,
          showOverflowTooltip: true,
          render: (h, { row }) => {
            return <el-progress style="width: 100%;" percentage={Number(row.pickRatio || 0)}></el-progress>
          }
        },
        {
          prop: 'operate',
          label: $i18n.t('common.operation'),
          width: 160,
          fixed: 'right',
          render: (h, scope) => {
            return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate} />
          }
        }
      ]
    }
  },
  mounted() {
    sendThis(this)
  },
  methods: {
    getSearchParams() {
      let formData = this.$refs.eleFormSearch.formData || {}
      return formData
    },
    // 搜索
    handleSearch() {
      let { prodName = '', isDisplayed = [] } = this.getSearchParams()
      this.tableData = [
        ...this.formDataDialog.mesRequisitionBillList.filter((ite) => {
          let bool = isDisplayed.length ? Number(ite.unReceiveQty) > 0 : false
          if (isDisplayed.length) {
            return ite.materialName.includes(prodName) && bool
          } else {
            return ite.materialName.includes(prodName)
          }
        })
      ]
    },
    // 重置
    handleReset() {
      this.tableData = this.formDataDialog.mesRequisitionBillList
    },
    // 表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name
      const fnc = {}
      fnc[data.handleName]()
    },
    // 表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        detail: () => {
          this.disableFields(true)
          this.rowDetail(row.id)
          this.visible = true
        }
      }
      fnc[handleName]()
    },
    doSubmit({ title, api, data }) {
      this.isLoading = true
      api(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || title)
          this.visible = false
          this.visible_generate = false
          this.refresh()
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return // 判断状态
      const params = this.formDataDialog.id ? { title: $i18n.t('common.editSuccess'), api: rowUpdate, data } : { title: $i18n.t('common.addSuccess'), api: rowCreate, data }
      this.doSubmit(params)
    },
    disableFields(flag) {
      this.formDescDialog.disabled = flag
      this.formDescDialog.isShowSubmitBtn = !flag
    },
    rowDetail(id) {
      getSuitDetailById(id).then((res) => {
        this.formDataDialog = res.data.result
        this.tableData = [...(res.data.result.mesRequisitionBillList || [])]
      })
    },
    // 刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    }
  }
}
</script>
<style lang="scss" scoped>
.descriptions {
  padding-top: 10px;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}
.tables {
  /deep/.el-form-item__label {
    padding-right: 0px !important;
  }
}
/deep/ .el-progress--line {
  display: flex;
  align-items: center;
}
</style>
